<template>
    <el-card shadow="never" :body-style="{ padding: '30px' }" style="width: 1020px">
        <div class="contextBox">
            <div class="avatar">
                <img :src="newUserInfo?.avatar" alt="">
                <div class="text">
                    <div class="name"></div>
                    <div class="status">您还不是会员</div>
                </div>
            </div>
            <div class="saving">开通会员平均每年可省：￥9500</div>
            <div class="price_box_container">
                <div class="price_box " >
                    <div>季度会员</div>
                    <div>￥<span></span>98/季</div>
                    <div>合计￥98</div>
                </div>
                <div class="price_box " >
                    <div>1年会员</div>
                    <div>￥<span></span>268/季</div>
                    <div>合计￥268</div>
                </div>
                <div class="price_box " >
                    <div>3年会员</div>
                    <div>￥<span></span>196/季</div>
                    <div>合计￥588 (省￥ 216)</div>
                </div>
                <div class="priceRecommend">推荐</div>
            </div>
            <div class="memberBtn">立即以888元开通</div>
            <div class="deal">开通即视为同意<a target="_blank" href="">《会员服务协议》</a></div>
            <div class="line"></div>
        </div>
        <div class="memberTitle">会员专属权益</div>
        <ul class="memberList">
            <el-popover placement="top-start" :width="250" trigger="hover">
                <slot name="content">
                    <img class="contentImg" src="../../../assets/images/free.png" alt="">
                    <p class="contentWord">会员专区的724个课程，会员全都可以免费观看学习！课程总价若干万元，而且每月更新、持续增加。
                        也许学会某一课程，单独购买的单价就已远超会员费，绝对超值！</p>
                    <router-link to=""> <button class="contentButton">立即前往会员专区</button>
                    </router-link>
                </slot>
                <template #reference>
                    <li>
                        <img src="../../../assets/images/free.png" alt="">
                        <p>72个会员专区</p>
                        <p>课程免费学习</p>
                    </li>
                </template>
            </el-popover>
            <el-popover placement="top-start" :width="250" trigger="hover">
                <slot name="content">
                    <img class="contentImg" src="../../../assets/images/lijian.png" alt="">
                    <p class="contentWord">会员购买非会员专区标有会员“立减”金额的视频课、直播课、线下课等商品服务，可获会员专属立减优惠！
                        会员优惠很省钱... 几十... 几千... 买的越多，省的越多！</p>
                </slot>
                <template #reference>
                    <li>
                        <img src="../../../assets/images/lijian.png" alt="">
                        <p>非会员专区课程</p>
                        <p>可获会员立减优惠券</p>
                    </li>
                </template>
            </el-popover>
            <el-popover placement="top-start" :width="250" trigger="hover">
                <slot name="content">
                    <img class="contentImg" src="../../../assets/images/member_screen.png" alt="">
                    <p class="contentWord">会员使用同屏对比功能，将自己跳的动作与原跳视频画面进行每一节拍、每一时刻的对比学习。
                        同屏对比，精确又直观，让会员学习效果最大化！</p>
                    <router-link to=""><button class="contentButton">查看使用说明文档</button></router-link>
                </slot>
                <template #reference>
                    <li>
                        <img src="../../../assets/images/member_screen.png" alt="">
                        <p>同屏对比</p>
                        <p>功能</p>
                    </li>
                </template>
            </el-popover>
            <el-popover placement="top-start" :width="250" trigger="hover">
                <slot name="content">
                    <img class="contentImg" src="../../../assets/images/update_music.png" alt="">
                    <p class="contentWord">会员可一键从任何视频中提取音频/音乐（视频课需已设置允许提取）、自动保存在音频库，并可分享导出或导入！
                        将手机相册里的视频添加到练习室，同样可以音频提取。</p>
                    <router-link to=""><button class="contentButton">查看使用说明文档</button></router-link>
                </slot>
                <template #reference>
                    <li>
                        <img src="../../../assets/images/update_music.png" alt="">
                        <p>音频提取</p>
                        <p>功能</p>
                    </li>
                </template>
            </el-popover>
            <el-popover placement="top-start" :width="250" trigger="hover">
                <slot name="content">
                    <img class="contentImg" src="../../../assets/images/music_clip.png" alt="">
                    <p class="contentWord">会员可对音频库的音频/音乐进行任意剪辑或合并，并可分享导出或导入！
                        将外部音乐导入到音频库，同样可以音频剪辑哦。</p>
                    <router-link to=""><button class="contentButton">查看使用说明文档</button></router-link>
                </slot>
                <template #reference>
                    <li>
                        <img src="../../../assets/images/music_clip.png" alt="">
                        <p>音频剪辑</p>
                        <p>功能</p>
                    </li>
                </template>
            </el-popover>
            <el-popover placement="top-start" :width="250" trigger="hover">
                <slot name="content">
                    <img class="contentImg" src="../../../assets/images/member_icon_beat.png" alt="">
                    <p class="contentWord">通过设置节拍口令，会员能把想学的任何作品视频自动变成口令教程，就像老师一样数节拍口令教学！
                        节拍口令，让会员总能快人一步、抢先学新舞！</p>
                    <router-link to=""><button class="contentButton">查看使用说明文档</button></router-link>
                </slot>
                <template #reference>
                    <li class="left">
                        <img src="../../../assets/images/member_icon_beat.png" alt="">
                        <p>节拍口令</p>
                        <p>功能</p>
                    </li>
                </template>
            </el-popover>
            <el-popover placement="top-start" :width="250" trigger="hover">
                <slot name="content">
                    <img class="contentImg" src="../../../assets/images/member_photo_download1.png" alt="">
                    <p class="contentWord">将缓存的资源视频（不含视频课、直播课等课程的视频），保存到手机本地相册</p>
                </slot>
                <template #reference>
                    <li>
                        <img src="../../../assets/images/member_photo_download1.png" alt="">
                        <p>保存视频到</p>
                        <p>手机本地</p>
                    </li>
                </template>
            </el-popover>
            <el-popover placement="top-start" :width="250" trigger="hover">
                <slot name="content">
                    <img class="contentImg" src="../../../assets/images/lv_ad.png" alt="">
                    <p class="contentWord">会员有效期内，自动跳过视频播放页的广告。</p>
                </slot>
                <template #reference>
                    <li>
                        <img src="../../../assets/images/lv_ad.png" alt="">
                        <p>免广告特权</p>
                    </li>
                </template>
            </el-popover>
            <el-popover placement="top-start" :width="250" trigger="hover">
                <slot name="content">
                    <img class="contentImg" src="../../../assets/images/lv_accelerate.png" alt="">
                    <p class="contentWord">开通年费会员后，可获得相当于10倍会员费的成长值。会员有效期内可获得1.5倍成长值加速特权。</p>
                </slot>
                <template #reference>
                    <li>
                        <img src="../../../assets/images/lv_accelerate.png" alt="">
                        <p>成长等级</p>
                        <p>加速特权</p>
                    </li>
                </template>
            </el-popover>
            <el-popover placement="top-start" :width="250" trigger="hover">
                <slot name="content">
                    <img class="contentImg" src="../../../assets/images/course_equity.png" alt="">
                    <p class="contentWord">会员学习成长过程中的困惑、问题和所需资源，平台将优先更大力度提供帮助。</p>
                </slot>
                <template #reference>
                    <li>
                        <img src="../../../assets/images/course_equity.png" alt="">
                        <p>会员学习</p>
                        <p>成长优先帮扶</p>
                    </li>
                </template>
            </el-popover>
            <el-popover placement="top-start" :width="250" trigger="hover">
                <slot name="content">
                    <img class="contentImg" src="../../../assets/images/member_logo.png" alt="">
                    <p class="contentWord">所有用户都将会看到您的会员闪耀标识，彰显您的尊贵身份，让您更加出众耀眼！</p>
                </slot>
                <template #reference>
                    <li>
                        <img src="../../../assets/images/member_logo.png" alt="">
                        <p>会员专享</p>
                        <p>身份标识</p>
                    </li>
                </template>
            </el-popover>
            <el-popover placement="top-start" :width="250" trigger="hover">
                <slot name="content">
                    <img class="contentImg" src="../../../assets/images/update_equity.png" alt="">
                    <p class="contentWord">会员有效期内，您有权享受新增加的相应会员等级的会员权益和会员功能。</p>
                </slot>
                <template #reference>
                    <li class="left">
                        <img src="../../../assets/images/update_equity.png" alt="">
                        <p>享受新增</p>
                        <p>权益和功能</p>
                    </li>
                </template>
            </el-popover>
        </ul>
        <div class="line" style="margin-top: 15px;"></div>
        <!-- 点击图标显示的dialog -->
        <el-dialog width="25%" align-center>
            <span>仅限23周岁下购买，请在APP中进行身份认证,打开APP 我的->管理我的主页->我的资料->身份认证</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </el-card>
</template>

<script setup lang="ts">
import centerApi,{type UserInfo} from "@/api/center";
import { onMounted, reactive, ref } from 'vue';
const newUserInfo = ref<UserInfo>();
const useInfo =  async() => {
    try {
        let resoult = await centerApi.getInfo()
        newUserInfo.value = resoult.data
    } catch (error) {
    }
}
onMounted(() => {
    useInfo()
}) 


</script>

<style lang="less" scoped>
.contextBox {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.avatar {
    height: 100px;
    width: 205px;
    display: flex;
}

.avatar img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.avatar .text {
    width: 84px;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: center;
}

.avatar .text .name {
    font-size: 20px;
    color: #000;
}

.avatar .text .status {
    margin-top: 14px;
    color: #F93684;
    font-size: 14px;
}

.saving {
    margin-top: 19px;
}

.price_box_container {
    display: flex;
    margin-top: 21px;
    position: relative;
}

.price_box {
    width: 216px;
    height: 120px;
    border: 2px solid #b1b5c1;
    border-radius: 10px;
    margin-right: 30px;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.price_box.active {
    border-color: #F93684;
    background-color: #f9ebf1;
    color: #f93684;
}

.price_box div {
    font-size: 16px;
}

.price_box span {
    font-size: 30px;
}

.memberBtn {
    padding: 9px 15px;
    width: 298px;
    height: 36px;
    background-color: #ff4683;
    border: 1px solid #dcdfe6;
    line-height: 36px;
    color: #fff;
    text-align: center;
    margin: 30px 0 12px;
    border-radius: 10px;
}

.deal {
    padding-bottom: 37px;
}

.deal a {
    color: #F93684;
}

.line {
    width: 100%;
    border: .5px solid #eee;
}

.memberTitle {
    font-size: 20px;
    font-weight: 600;
    margin-top: 32px;
}

.memberList {
    margin: 20px 0 5px;
    padding-left: 19px;
    display: flex;
    flex-wrap: wrap;
}

.memberList li {
    width: 127px;
    height: 113px;
    border: 1px solid #eee;
    padding-top: 14px;
    margin: 0 30px 30px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.memberList li img {
    width: 46px;
    height: 42px;
}

.memberList li p {
    margin-top: 10px;
    font-size: 14px;
    color: #111;
}

.memberList .left {
    margin: 0;
}

.content {
    border: 1px solid #F93684;
}

.contentImg {
    display: block;
    height: 43px;
    width: 46px;
    margin: 10px auto;
}

.contentWord {
    font-size: 14px;
    margin: 5px 15px;

}

.contentButton {
    display: block;
    width: 172px;
    height: 36px;
    font-size: 16px;
    color: #fff;
    margin: 20px auto;
    padding: 10px 20px;
    line-height: 20px;
    background-color: #F9538a;
    border: none;
    border-radius: 10px;

}

.priceRecommend {
    width: 76px;
    height: 36px;
    border-radius: 20px;
    background: #F9538a;
    text-align: center;
    line-height: 36px;
    color: #fff;
    position: absolute;
    right: 5px;
    top: 10px;
}

.dialog-footer button{
    background-color: #f93684;
    border: none;
}
</style>